<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{ $t("importRemittance.title")}}</span></el-col>
      </el-row>
      <div style="padding:0 20px">
        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border style="width: 100%;margin: 10px 0" class="yt-table" max-height="810">
          <el-table-column align="center" :label="$t('importRemittance.exportName')" prop="exportName" class-name="pd" min-width="170"/>
          <el-table-column align="center" :label="$t('importRemittance.type')" prop="type" class-name="pd" min-width="100"/>
          <el-table-column align="center" :label="$t('importRemittance.createTime')" prop="createTime" class-name="pd" :formatter="formatter.formatTimes" min-width="100"/>
          <el-table-column align="center" :label="$t('importRemittance.operator')" prop="operator" class-name="pd" min-width="100"/>
          <el-table-column align="center" :label="$t('importRemittance.result')" prop="result" class-name="pd" min-width="100"/>
          <el-table-column align="center" :label="$t('importRemittance.operation')" class-name="pd" min-width="100">
            <template slot-scope="scope">
              <i v-if="scope.row.exportStatus === '1'" class="el-icon-download" @click="exportFile(scope.row.id, scope.row.exportName)"></i>
              <i v-else class="el-icon-zoom-in"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import formatter from '@/utils/formatter';
  import { page } from '@/api/e-formula/importRemittance';
  export default {
    name: 'index',
    data() {
      return {
        config: Config.I18n,
        FileName: this.$store.getters.allMapDic.importAndExport,
        formatter,
        list: [
        ],
        listQuery: {
          page: 1,
          limit: 10,
          name: ''
        },
        total: null
      };
    },
    created() {
      this.getList();
    },
    methods: {
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      getList() {
        page(this.listQuery.page, this.listQuery.limit).then(response => {
          if (response.status === 200) {
            this.list = response.data.rows;
            this.total = response.data.total;
          }
          for (const file of this.list) {
            file.exportName = this.FileName[file.exportName]

            if (file.exportOperate && file.exportOperate === 1) {
              file.type = this.$t('importRemittance.upload');
            } else {
              file.type = this.$t('importRemittance.download');
            }
            if (file.exportStatus && file.exportStatus === '1') {
              file.result = this.$t('tips.success');
            } else {
              file.result = this.$t('tips.fail');
            }
            if (file.createTime) {
              file.createTime = this.formatter.formatTimes(
                '',
                '',
                file.createTime
              );
            }
          }
        });
      },
      exportFile(id, name) {
        console.log(id + name + ': 开始导出');
        const a = document.createElement('a')
        const href = '/api/admin/excel/downloadFile?id=' + id
        a.download = Date.now()
        a.href = href
        a.click()
      }
    }
  };
</script>
<style scoped>
  .title_text {
    font-size: 20px;
    padding: 15px;
    border-bottom: 1px solid black;
    width: 200px;
  }
  .el-pagination{
    padding:0 20px;
  }
</style>
